<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>H+ 后台主题UI框架 - 数据表格</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link href="/after/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">


    <!-- Data Tables -->
    <link href="/after/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/after/css/animate.min.css" rel="stylesheet">

    <link rel="stylesheet" href="/after/css/bootstrap.min.css">
    <link rel="stylesheet" href="/after/css/laypage.css">
    <script type="text/javascript" src="/after/js/vue/vue.min.js"></script>
    <script src="/after/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/after/js/laypage/laypage.js" charset="utf-8"></script>
    <script type="text/javascript" src="/after/js/layer/layer.js" charset="utf-8"></script>
</head>

<body class="gray-bg">


    <div id="app" class="container"  style="float: left;margin-top: 30px;">
        <div class="ibox-content">
            <div class="" style="float:right;">
                <input type="text" class="am-form-field " id="username" placeholder="书名"/>
                <span class="am-input-group-btn">
              <button class=" btn btn-success" type="button" onclick="getUserPageList()">搜索</button>
            </div>
            <table class="table table-striped table-bordered table-hover " id="editable">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>出版社</th>
                    <th>出版时间</th>
                    <th>库存</th>
                    <th>价格</th>
                    <th>点击量</th>
                    <th>介绍</th>
                    <th>类型</th>

                    <th>操作</th>

                </tr>
                </thead>
                <tbody>

                <tr class="gradeG" v-for="(item,index) in result">
                    <td>{{index+1}}</td>
                    <td name="id"><input type="text"   :name="item.id" onchange="xiugainame(this)"  :value="item.name"  style="border-style:none;background-color:transparent"  /></td>
                    <td><input type="text"   :name="item.id" onchange="xiugaipublish(this)"  :value="item.publish"  style="border-style:none;background-color:transparent"/></td>
                    <td><input type="text"   :name="item.id" onchange="xiugaidate(this)"  :value="item.publish_date"  style="border-style:none;background-color:transparent" /></td>
                    <td><input type="text"   :name="item.id" onchange="xiugaistock(this)"  :value="item.stock"   style="border-style:none;background-color:transparent" /></td>
                    <td><input type="text"   :name="item.id" onchange="xiugaiprice(this)"  :value="item.price"   style="border-style:none;background-color:transparent" /></td>
                    <td><input type="text"   :name="item.id" onchange="xiugaiclick(this)"  :value="item.click"   style="border-style:none;background-color:transparent" /></td>
                    <td><input type="text"   :name="item.id" onchange="xiugaicontent(this)"  :value="item.content"   style="border-style:none;background-color:transparent" /></td>
                    <td>
                        <SELECT class="text" :name="item.id"  onfocus="getb(this)" onchange="jiegaibian(this)">
                            <OPTION selected :value="item.stype.btype.id">{{item.stype.btype.type}}</OPTION>
                        </SELECT>
                        <SELECT class="text"  :name="item.id" onfocus="gets(this)" onchange="huoqu(this)">
                            <OPTION selected :value="item.stype.id">{{item.stype.type}}</OPTION>
                        </SELECT>
                    </td>

                    <td>
                            <a :name="item.id" onclick="delEvent(this.name)" href="#" class="btn btn-primary ">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div id="pagenav"></div>
        </div>
    </div>


</body">

</html>
<script>
    var context="";
    var content = "";
    function getbtype(){

        $.ajax({
            url:"/book/getbtype.do",
            type:'post',
            dataType:'json',
            data:{
                name:"name"
            },
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                var list2=msg.btypelist;

                for(var x=0;x<list2.length;x++){
                    context+="<OPTION selected  value="+list2[x].id+">"+list2[x].type+"</OPTION>"
                }

            }
        })
    }
    function getb(obj) {
        var temp=obj;
        $(temp).html(context);
    }
function gets(obj){
    var temp=obj;
    var val = $(temp).prev().val();
    $.ajax({
        url: "/book/getstype.do",
        type: 'post',
        dataType: 'json',
        data: {
            id: val
        },
        error: function () {
            alert("错误");
        },
        success: function (msg) {
            var list = msg.stypelist;
            console.log(list);

            for (var x = 0; x < list.length; x++) {
                content += "<OPTION selected  value=" + list[x].id + ">" + list[x].type + "</OPTION>"
            }
            $(temp).html(content);
        }
    });
}
    function jiegaibian(obj) {
        var temp=obj;

        gets($(temp).next());
    }
function xiugainame(obj){
    $.ajax({
    url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"name",
            s:obj.value
        },
        error:function () {
            alert("修改错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })

}
function xiugaipublish(obj){

    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"publish",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })
}
function huoqu(obj){//修改类型
    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"stype",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })
}
function xiugaidate(obj){

    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"publish_date",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })

}function xiugaistock(obj){

    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"stock",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })


}function xiugaiprice(obj){

    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"price",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })


}function xiugaiclick(obj){

    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"click",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })

}
function xiugaicontent(obj){

    $.ajax({
        url:"/book/update.do",
        type:'post',
        dataType:'json',
        data:{
            id:obj.name,
            name:"content",
            s:obj.value
        },
        error:function () {
            alert("错误");
        },
        success:function (msg) {
            getUserPageList();
        }
    })


}
    var app = new Vue({
        el : '#app',
        data : {
            result : []
        },
        methods: {}
    });
    //查询用户数据
    var getUserPageList = function(curr) {
        $.ajax({
            type : "GET",
            dataType : "json",
            url : "/book/getpage.do",
            data : {
                pageNum:curr || 1,
                pageSize:4,
                name:$("#username").val()
            },

            success : function(msg) {
                app.result=msg.list;
                console.log(msg)
                laypage({
                    cont : 'pagenav', //容器。值支持id名、原生dom对象，jquery对象,
                    pages : msg.totlpage, //总页数
                    skin:'#DDD',
                    first : '首页',
                    last : '尾页',
                    curr : curr || 1, //当前页

                    jump : function(obj, first) { //触发分页后的回调

                        if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr

                            getUserPageList(obj.curr);
                        }
                    }
                });

            }
        });
    }

    <!--删除-->
    function delEvent(obj){
        $.ajax({
            url:"/book/dell.do",
            type:'post',
            dataType:'json',
            data:{
                id:obj
            },
            error:function () {
                alert("错误");
            },
            success:function (msg) {
                getUserPageList();
            }
        })
    }


    getUserPageList();
    getbtype();
</script>